<template>
  <div class="place">
    <div class="showPlace" @click="handleSelect">
      <b>{{ place }}</b>
      <i class="iconfont icon-down" v-show="iconShow"></i>
      <i class="iconfont icon-up" v-show="!iconShow"></i>
    </div>
    <span class="weather" v-if="weatherInfo">
      {{ weatherInfo.weather }} {{ weatherInfo.temperature }}℃
    </span>
  </div>
  <div class="city-panel" v-show="!iconShow">
    <header class="city-header">
      <span class="city-current">当前城市：{{ place }}</span>
    </header>
    <ul class="city-hotlist">
      <li @click="MoveTOCity('中国')">全国</li>
      <li @click="MoveTOCity('北京')">北京</li>
      <li @click="MoveTOCity('天津')">天津</li>
      <li @click="MoveTOCity('沈阳')">沈阳</li>
      <li @click="MoveTOCity('大连')">大连</li>
      <li @click="MoveTOCity('上海')">上海</li>
      <li @click="MoveTOCity('南京')">南京</li>
      <li @click="MoveTOCity('苏州')">苏州</li>
      <li @click="MoveTOCity('杭州')">杭州</li>
      <li @click="MoveTOCity('青岛')">青岛</li>
      <li @click="MoveTOCity('郑州')">郑州</li>
      <li @click="MoveTOCity('武汉')">武汉</li>
      <li @click="MoveTOCity('长沙')">长沙</li>
      <li @click="MoveTOCity('广州')">广州</li>
      <li @click="MoveTOCity('深圳')">深圳</li>
      <li @click="MoveTOCity('重庆')">重庆</li>
      <li @click="MoveTOCity('成都')">成都</li>
      <li @click="MoveTOCity('西安')">西安</li>
      <li @click="MoveTOCity('香港')">香港</li>
      <li @click="MoveTOCity('澳门')">澳门</li>
    </ul>
    <section>
      <div class="city-pc-title">
        <span
          class="city-province-title"
          :class="{ cityselect: provinceSelect }"
          @click="handleProvinceSelect"
          >按省份</span
        >
        <span
          class="city-city-title"
          :class="{ cityselect: citySelect }"
          @click="handleCitySelect"
          >按城市</span
        >
      </div>

      <div class="city-search">
        <span class="city-search-logo"
          ><i class="iconfont icon-sousuo"></i
        ></span>
        <input
          type="text"
          class="city-search-suggestion"
          placeholder="请输入城市"
          autocomplete="off"
        />
      </div>
    </section>
    <section class="city-list" v-show="provinceSelect">
      <ul class="city-province-letter">
        <li
          v-for="letter in provinceLetters"
          :key="letter"
          @click="scrollToProvince(letter)"
        >
          {{ letter }}
        </li>
      </ul>
      <div
        class="slimScrollDiv"
        style="position: relative; overflow: auto; width: auto; height: 112px"
      >
        <dl
          class="city-province"
          v-for="prov in provinceList"
          :key="prov.name"
          :id="'prov-' + prov.letter"
          style="overflow: hidden; width: auto"
        >
          <dt>{{ prov.name }}：</dt>
          <dd>
            <li
              v-for="city in prov.cities"
              :key="city"
              @click="MoveTOCity(city)"
            >
              {{ city }}
            </li>
          </dd>
        </dl>
        <div
          class="slimScrollBar"
          style="
            background: rgb(0, 0, 0);
            width: 3px;
            position: absolute;
            top: 6px;
            opacity: 0.4;
            display: none;
            border-radius: 7px;
            z-index: 99;
            right: 1px;
            height: 30px;
          "
        ></div>
        <div
          class="slimScrollRail"
          style="
            width: 3px;
            height: 100%;
            position: absolute;
            top: 0px;
            display: none;
            border-radius: 7px;
            background: rgb(51, 51, 51);
            opacity: 0.2;
            z-index: 90;
            right: 1px;
          "
        ></div>
      </div>
    </section>
    <section class="city-list" v-show="citySelect">
      <ul class="city-city-letter">
        <li
          v-for="letter in cityLetters"
          :key="letter"
          @click="scrollToCity(letter)"
        >
          {{ letter }}
        </li>
      </ul>
      <div
        class="slimScrollDiv"
        style="position: relative; overflow: AUTO; width: auto; height: 100px"
      >
        <dl
          v-for="group in cityList"
          :key="group.letter"
          :id="'city-' + group.letter"
          style="overflow: hidden; width: auto"
        >
          <dt>{{ group.letter }}：</dt>
          <dd>
            <li
              v-for="city in group.cities"
              :key="city"
              @click="MoveTOCity(city)"
            >
              {{ city }}
            </li>
          </dd>
        </dl>
      </div>
    </section>
  </div>
</template>
<script setup>
import { inject, ref, onMounted, watch } from 'vue'
import cityData from '@/cityData.json'
import provinceData from '@/provinceData.json'

const mapRef = inject('map')
const place = ref()

const iconShow = ref(true)

const weatherInfo = ref(null)
const provinceSelect = ref(true)
const citySelect = ref(false)

const provinceLetters = [
  'A',
  'F',
  'G',
  'H',
  'J',
  'L',
  'N',
  'Q',
  'S',
  'T',
  'X',
  'Y',
  'Z',
]
const cityLetters = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'W',
  'X',
  'Y',
  'Z',
]
const provinceList = provinceData
const cityList = cityData

const getWeatherByCity = (city) => {
  if (!city) return
  const weather = new AMap.Weather()
  weather.getLive(city, (err, data) => {
    if (!err && data) {
      weatherInfo.value = {
        weather: data.weather,
        temperature: data.temperature,
      }
    } else {
      weatherInfo.value = null
    }
  })
}

let geocoder = null
const getCityByCoord = (lnglat) => {
  if (!geocoder) return

  geocoder.getAddress(lnglat, (status, result) => {
    if (status === 'complete' && result.regeocode) {
      const addr = result.regeocode.addressComponent
      const city = addr.city
      const province = addr.province
      const country = '全国'
      const map = mapRef.value
      const zoom = map.getZoom()
      // console.log(province, country)
      if (zoom > 5.76) {
        place.value = city
        // console.log(place.value)
        if (place.value == '') place.value = province
        getWeatherByCity(city)
      } else if (zoom < 4.7) {
        place.value = country
        weatherInfo.value = null
      } else {
        place.value = province
        weatherInfo.value = null
      }
    } else {
      place.value = '其他区域'
    }
  })
}
onMounted(() => {})

watch(
  () => mapRef.value,
  (map) => {
    if (map) {
      // 获取初始位置
      geocoder = new AMap.Geocoder()
      const center = map.getCenter()
      const lnglat = [center.lng, center.lat]
      getCityByCoord(lnglat)
      // 监听地图中心变化
      map.on('moveend', () => {
        const newCenter = map.getCenter()
        const newLnglat = [newCenter.lng, newCenter.lat]
        getCityByCoord(newLnglat)
      })
    }
  },
  { immediate: true }
)
function MoveTOCity(city) {
  const map = mapRef.value
  map.setCity(city)
}
function handleSelect() {
  iconShow.value = !iconShow.value
}
function handleProvinceSelect() {
  provinceSelect.value = true
  citySelect.value = false
}
function handleCitySelect() {
  provinceSelect.value = false
  citySelect.value = true
}

function scrollToProvince(letter) {
  const target = document.getElementById('prov-' + letter)
  if (target) target.scrollIntoView({ behavior: 'smooth' })
}

function scrollToCity(letter) {
  const target = document.getElementById('city-' + letter)
  if (target) target.scrollIntoView({ behavior: 'smooth' })
}
</script>
<style scoped>
@import 'http://at.alicdn.com/t/c/font_4989319_7okbm5cgvw6.css';
.place {
  position: fixed;
  top: 10px;
  left: 400px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 14px 8px;
  display: flex;
  align-items: center;
  font-size: 12px;
  user-select: none;
  z-index: 999;
}
.showPlace {
  cursor: pointer;
  color: #5f6477;
}
.weather {
  margin-left: 12px;
  font-size: 13px;
  color: #5f6477;
}
.city-panel {
  position: absolute;
  top: 60px;
  left: 400px;
  color: #5f6477;
  width: 420px;
  height: 310px;
  line-height: 26px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 15px 6px;
  align-items: center;
  font-size: 12px;
  user-select: none;
  z-index: 999;
}
.city-header {
  line-height: 36px;
  border-bottom: 1px solid #cbcccd;
}
.city-current {
  font-size: 14px;
  font-weight: 700;
}
.city-hotlist {
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 6px;
}
.city-hotlist ul {
  display: block;

  margin: 0;
  padding: 0;
}
.city-hotlist li {
  list-style: none;
  float: left;
  margin-right: 10px;
  color: #1a66ff;
  cursor: pointer;
  display: list-item;
}
.city-pc-title {
  width: 48%;
  display: inline-block;
  border: 1px solid #cbcccd;
  border-bottom: none;
  border-radius: 2px;
}
.city-pc-title span {
  width: 50%;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border-bottom: 1px solid #cbcccd;
  background: #f7f7f7;
  box-sizing: border-box;
}
.city-city-title {
  border-left: 1px solid #cbcccd;
}
.cityselect {
  background-color: #fff !important;
  border-bottom: none !important;
}
.city-search {
  width: 48%;
  margin-left: 4%;
  display: inline-block;
  position: relative;
}
.city-search-logo {
  position: absolute;
  left: 6px !important;
}
.city-search input {
  border: 1px solid #cbcccd;
  padding: 5px 0 5px 34px;
  width: 100%;
  border-radius: 2px;
  box-sizing: border-box;
}
.city-city-letter,
.city-province-letter {
  margin-top: 10px;
  white-space: normal;
}
.city-city-letter li,
.city-province-letter li {
  list-style: none;
  display: inline-block;
  background-color: #f5f5f5;
  margin-left: 6px;
  cursor: pointer;
  line-height: 18px;
  width: 18px;
  text-align: center;
}
.city-list dl {
  margin: 4px 0;
  position: relative;
}
.city-list dl dt {
  float: left;
  font-weight: 700;
  line-height: 20px;
}
.city-list dl dd {
  white-space: normal;
  line-height: 20px;
  margin-bottom: 8px;
}
.city-list dl dd li {
  display: inline-block;
  margin-right: 9px;
  cursor: pointer;
  color: #999;
}
</style>
